<template>
	<div>
		<el-dialog v-dialogDrag :visible.sync="approvalVisible" width="40%" :before-close="handleClose">
			<span slot="title">{{isFirstNode?'发起节点':'审批节点'}}</span>
			<div class="dialoginfo">
				<div class="dialoginfo-title">
					<div v-show="!isFirstNode" :class="approvalModule == 0 ? 'active' : 'none'" @click="approvalModule = 0">
						<div>选择审批人</div>
					</div>
					<div :class="approvalModule == 1 ? 'active' : 'none'" @click="approvalModule = 1">
						<div>表单权限</div>
					</div>
				</div>
				<div class="dialoginfo-info">
					<el-form v-if="approvalModule == 0" ref="form" label-position="left" :model="form" label-width="120px">
						<el-form-item>
							<span slot="label" style="color: #ff0000">审批名称</span>
							<el-input v-model="form.approvalName" style="width:100%;" placeholder="请输入审批名称"></el-input>
						</el-form-item>
						<el-form-item label="选择审批人类别">
							<el-select v-model="form.approvalUserTypeId" placeholder="选择审批人类别" style="width:100%;">
								<el-option v-for="item in approveTypes" :key="item.code" :label="item.name" :value="item.code"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item v-show="form.approvalUserTypeId==='5'" label="管理人函数">
							<el-input v-model="form.function" style="width:100%;" placeholder="请输入管理人函数"></el-input>
						</el-form-item>
						<el-form-item v-show="form.approvalUserTypeId==='11'" label="人事字段">
							<el-select v-model="form.mattersControlCode" placeholder="请选择人事字段" style="width:100%;">
								<el-option v-for="item in persomTypeList" :key="item.code" :label="item.name" :value="item.code"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button v-show="form.approvalUserTypeId==='1'" class="bottom_all" style="margin: 0;" size="medium" @click="addPerson">添加成员</el-button>
							<el-button v-show="form.approvalUserTypeId==='2'" class="bottom_all" style="margin: 0;" size="medium" @click="addPosition">添加岗位</el-button>
						</el-form-item>
						<div v-show="form.approvalUserTypeId==='2'||form.approvalUserTypeId==='1'" class="approve-person">
							<el-row :gutter="10" type='flex' align='middle'>
								<el-col style="width:100px;">已添加</el-col>
								<el-col :span="20">
									<el-tag v-for="item in choisedPersonData" :key="item.id" class="person-tag" closable :disable-transitions="false" @close="closeTag(item)">
										{{item.name}}
									</el-tag>
								</el-col>
							</el-row>
						</div>
						<div v-show="choisedPersonData.length" class="fileter-type">
							<el-row :gutter="10" type='flex' align='middle'>
								<el-col style="width:100px;">筛选类型</el-col>
								<el-col :span="20">
									<el-select v-model="form.filterType" placeholder="请选择">
										<el-option v-for="item in selectOptions" :key="item.value" :label="item.name" :value="item.value">
										</el-option>
									</el-select>
									<span v-if="form.filterType===1" style="margin-left:5px;">已添加人员交集作为发起人</span>
									<span v-else style="margin-left:5px;">添加的人员并集作为发起人</span>
								</el-col>
							</el-row>
						</div>
						<div style="height: 32px;line-height: 32px;">多人审批时采用的审批方式</div>
						<el-form-item label-width="0px">
							<el-radio-group v-model="form.multiApprovalType">
								<div style="padding: 10px 0;">
									<el-radio label="1">依次审批</el-radio>
								</div>
								<div>
									<el-radio label="2">
										<span>会签（须所有审批人通过率不小于</span>
										<el-input v-model="form.jointlySign" type="Number" oninput="if( this.value >100 )  this.value =100" size="mini" style="width: 55px;margin: 0 5px;"></el-input>
										<span>%，即为同意）</span>
									</el-radio>
								</div>
								<div style="padding: 10px 0;">
									<el-radio label="3">或签（一名审批人同意或拒绝即可）</el-radio>
								</div>
							</el-radio-group>
						</el-form-item>
						<div style="height: 32px;line-height: 32px;">设置</div>
						<el-form-item label-width="0px">
							<el-checkbox v-model="form.keepTime">
								<span>计时</span>
								<el-input v-model="form.timeNum" type="Number" maxlength="3" size="mini" style="width: 55px;margin: 0 5px;"></el-input>
								<el-select v-model="form.timeUnit" type="Number" size="mini" style="width: 120px;margin: 0 5px;">
									<el-option label="小时" value="0"></el-option>
									<el-option label="天(不跳过节假日)" value="1"></el-option>
									<el-option label="天(跳过节假日)" value="2"></el-option>
								</el-select>
							</el-checkbox>
							<el-checkbox v-model="form.mustReview">必审节点</el-checkbox>
							<el-checkbox v-model="form.suspension">允许中止</el-checkbox>
							<el-checkbox v-model="form.viewOtherOption">可见他人审批意见</el-checkbox>
							<el-checkbox v-model="form.mustWriteOption">必填审批意见</el-checkbox>
						</el-form-item>
						<div style="height: 32px;line-height: 32px;">操作菜单栏</div>
						<el-form-item label-width="0px">
							<el-checkbox-group v-model="form.handlerMenu">
								<el-checkbox v-for="item in hanldeMenuList" :key="item.id" :label="item.id">{{item.name}}</el-checkbox>
							</el-checkbox-group>
						</el-form-item>
					</el-form>
					<div v-if="approvalModule == 1">
						<el-table :data="elementDatas" style="width: 100%">
							<el-table-column prop="name" label="表单类型"></el-table-column>
							<el-table-column label="可编辑">
								<template slot-scope="scope">
									<el-checkbox v-model="scope.row.readonly"></el-checkbox>
								</template>
							</el-table-column>
							<el-table-column prop="hideType" label="隐藏选项">
								<template slot-scope="scope">
									<el-select v-model="scope.row.hideType" size="mini">
										<el-option label="可见" value="1"></el-option>
										<el-option label="隐藏全部" value="2"></el-option>
										<el-option label="仅隐藏内容" value="3"></el-option>
									</el-select>
								</template>
							</el-table-column>
						</el-table>
					</div>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button class="bottom_all_two" size="medium" @click="handleClose">取 消</el-button>
				<el-button class="bottom_all" size="medium" @click="sureSubmit">确 定</el-button>
			</span>
		</el-dialog>
		<personModel :visible='visible' :type="2" :isPerson='true' :choisedDatas="choisedPersonData" @closeModel='closeModel' @getPerson='setSendPerson' />
		<choisePosition :visible='positionVisible' @closeModel='closePosiModel' @getPerson='setSendPosition' />
	</div>
</template>
<script>
import { queryPage as approveType } from '@/api/Signed/TypeApprover';
import personModel from '@/components/ChoisePerson/personModel';
import choisePosition from '@/components/ChoisePerson/choisePosition';
import utils from '@/utils/utils';
export default {
	props: ['approvalVisible', 'elementData', 'approvalEditData', 'isFirstNode'],
	components: {
		personModel,
		choisePosition,
	},
	data() {
		return {
			approvalModule: 0,
			visible: false,
			positionVisible: false,
			personType: null,
			form: {
				approvalName: '',
				approvalUserTypeId: '',
				multiApprovalType: '1',
				jointlySign: '',
				keepTime: '',
				timeNum: '',
				timeUnit: '',
				mustReview: '',
				suspension: '',
				viewOtherOption: '',
				mustWriteOption: '',
				handlerMenu: [],
				filterType: 2,
			},
			hanldeMenuList: utils.Constant.hanldeMenu,
			checkedCities: '',
			approveTypes: [{
				name: '指定成员',
				code: '1'
			}, {
				name: '管理人函数',
				code: '5'
			}, {
				name: '发起人自选',
				code: '6'
			}, {
				name: '审批人自选',
				code: '11'
			},],
			choisedPersonData: [],
			choisedPositionData: [],
			selectOptions: [{
				name: '交集',
				value: 1
			}, {
				name: '并集',
				value: 2
			}],
			elementDatas: [],
			persomTypeList: [],
		};
	},
	watch: {
		approvalVisible(newVal) {
			this.approvalModule = 0;
			if (newVal) {
				/**
				 * @Description: 
				 * @param {*} elementData 前个页面带过来的表单元素
				 * @Author: wangwangwang
				 */				
				this.persomTypeList = this.elementData.filter(item => item.type === 11).map(item => ({...item, code: `matters_${item.code}`}));
				this.elementDatas = JSON.parse(JSON.stringify(this.elementData));
				if (this.approvalEditData) { // 编辑
					/**
					* @Description: 对表单元素进行整合
					* @param {*}
					* @Author: wangwangwang
					*/					
					this.elementDatas = this.elementData.map((item) => {
						for (let i = 0; i < this.approvalEditData.tableData.length; i+=1) {
							if (this.approvalEditData.tableData[i].code === item.code) {
								return {...item, hideType: this.approvalEditData.tableData[i].hideType, readonly: this.approvalEditData.tableData[i].readonly}
							}
						}
						return item
					})
					this.form = {
						...this.approvalEditData.form,
						keepTime: this.approvalEditData.form.keepTime * 1 === 1,
						mustReview: this.approvalEditData.form.mustReview * 1 === 1,
						suspension: this.approvalEditData.form.suspension * 1 === 1,
						viewOtherOption: this.approvalEditData.form.viewOtherOption * 1 === 1,
						mustWriteOption: this.approvalEditData.form.mustWriteOption * 1 === 1,
						handlerMenu: typeof(this.approvalEditData.form.handlerMenu) === 'object'?this.approvalEditData.form.handlerMenu:this.approvalEditData.form.handlerMenu.split(','),
						filterType: this.approvalEditData.form.filterType || 2,
					}
					/**
					* @Description: 构造审批人
					* @Param: 
					* @Author: wangwangwang
					*/
					this.choisedPersonData = [];
					if (this.form.approvalUserTypeId === '1') {
						const persons = this.form.processNodeApprover.map((item) => {
							return {
								id: item.foreignId,
								ids: item.ids,
								name: item.foreignName,
								type: item.type,
								pid: item.pid,
							}
						})
						this.choisedPersonData = persons;
					}
				} else {
					this.form = {
						approvalName: '',
						approvalUserTypeId: '',
						multiApprovalType: '1',
						jointlySign: '',
						keepTime: '',
						timeNum: '',
						filterType: 2,
						timeUnit: '',
						mustReview: '',
						suspension: '',
						viewOtherOption: '',
						mustWriteOption: '',
						handlerMenu: [],
					}
					// this.$refs.form.resetFields();
				}
				if (this.isFirstNode) {
					this.approvalModule = 1;
				}
			}
		},
	},
	methods: {
		handleClose() {
			this.$emit('closeVisible');
		},
		closeTag(data) {
			this.choisedPersonData.splice(this.choisedPersonData.indexOf(data), 1);
		},
		/**
		* @Description: 获取审批人类别
		* @Param: 
		* @Author: wangwangwang
		*/
		initApproveType() {
			approveType({ page: 1, pageSize: 1000 }).then(res => {
				if (res.code === 1001) {
					this.approveTypes = res.data.data;
				}
			})
		},
		addPerson() {
			this.visible = true;
		},
		addPosition() {
			this.positionVisible = true;
		},
		closeModel() {
			this.visible = false;
		},
		closePosiModel() {
			this.positionVisible = false;
		},
		setSendPerson(data) {
			this.choisedPersonData = data;
			this.visible = false;
		},
		setSendPosition(data) {
			this.choisedPositionData = data;
			this.positionVisible = false;
		},
		sureSubmit() {
			if (this.isFirstNode) { // 设置发起节点的权限
				const data = {
					form: {...this.form},
					tableData: this.elementDatas,
				}
				this.$emit('sendNodeData', data);
				return
			}
			if (!this.form.approvalName) {
				this.$message.warning('审批名称不能为空')
				return
			}
			if (this.form.approvalUserTypeId === '11' && !this.form.mattersControlCode) {
				this.$message.warning('人事字段不能为空')
				return
			}
			if (this.form.approvalUserTypeId === '1') { // 如果审批人类型为指定成员需要传人员列表
				const processNodeApprover = this.choisedPersonData.map(item => {
					return { foreignId: item.id, foreignName: item.name, foreignType: item.type, sponsorType: '1', pid: item.pid,ids: item.ids, }
				})
				this.form.processNodeApprover = processNodeApprover;
			}
			const data = {
				form: {...this.form, keepTime: this.form.keepTime ? 1 : 0, mustReview: this.form.mustReview ? 1 : 0,suspension: this.form.suspension ? 1 : 0, viewOtherOption: this.form.viewOtherOption ? 1 : 0, mustWriteOption: this.form.mustWriteOption ? 1 : 0, handlerMenu: this.form.handlerMenu},
				tableData: this.elementDatas,
			}
			this.$emit('sendNodeData', data);
		},
	},
	mounted() {
		// this.initApproveType();
	}
};
</script>
<style lang="scss" src="../newflows.scss" scoped></style>
<style lang="scss" scoped>
.dialoginfo {
  padding: 0;
}
.active {
  border-top: 1px #e1e5ed solid;
  border-right: 1px #e1e5ed solid;
  border-left: 1px #e1e5ed solid;
  background: #fff;
}
.dialoginfo-info {
  border-right: 1px #e1e5ed solid;
  border-left: 1px #e1e5ed solid;
  border-bottom: 1px #e1e5ed solid;
}
.approve-person {
  font-size: 15px;
  margin: 10px 0;
}
.fileter-type {
  margin: 10px 0;
}
.person-tag {
  margin-left: 10px;
  background: $bg_color;
  color: #fff;
}
</style>